import React, { Component } from 'react';
import { context } from '../context';
import PropTypes from 'prop-types';
export default class Block extends Component {
  static contextType = context;
  static defaultProps = {
    className: '',
    style: {},
    footer: <></>
  }
  static propTypes = {
    className: PropTypes.string,
    style: PropTypes.object,
    footer: PropTypes.node
  }
  state = {
    up: '',
    right: '',
    down: '',
    left: ''
  }
  resize = (...args) => {
    this.props.onresize && this.props.onresize.apply(null, args);
  }
  componentDidMount() {
    window.addEventListener('resize', this.resize);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }
  render() {
    return (
      <context.Consumer>
        {
          (value) => (
            <div className="banner__content__block" style={ { ...this.props.style, width: 100/value.col + '%', height: 100/ value.row  + '%' } }>
              { this.props.children }
              { this.props.footer }
            </div>
          )
        }
      </context.Consumer>

    )
  }
}